<template>
    <div  class="app-container">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="真实名字">
            <el-input v-model="user.trueName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
 
<script>
    import userApi from '@/api/rbac/user'

    export default {
        name: '',
        data() {
            return {
                user: {
                  name: '',
                  password: '',
                  trueName: '',
                  email: '',
                  phone: ''
                }
            }
        },
        created() {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          userApi.selectById(id)
            .then(response => {
              this.user = response.data
            })

        },
        methods: {
            onSubmit() {
                userApi.update(this.user)
                  .then(response => {
                      if(response.ok) {
                          //提示信息
                          this.$message({
                              type: 'success', // success,error,info,warning
                              message: response.msg
                          });
                          //回到列表页面，路由跳转
                          this.$router.push({path:'/user/list'})
                      } else {
                        this.$message({
                            type: 'error',
                            message: response.msg
                        });
                      }
                  })
            }
        }
    }
</script>
 
<style scoped>
     
</style>